<template>
  <el-dialog ref="dialog"
             :title="title"
             :visible.sync="visible"
             width="30%"
             :before-close="beforeClose">
    <el-table :data="tableData">
      <el-table-column v-for="(item,index) in tableColumn"
                       :key="index"
                       :prop="item.prop"
                       :label="item.label"
                       :width="item.width">
      </el-table-column>
    </el-table>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="closeDialog">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {ElMessage} from "element-plus";

export default { 
  data() {
    ElMessage.success("进来了");
    return {
      visible: false,
      vmId: 0,
      title: "标题",
      tableData: [],
      tableColumn: [{label: '列名', prop: 'col_code', width: 80, key: true},
        {label: '备注', prop: 'col_name', width: 80},
        {label: '类型', prop: 'col_type', width: 70},
        {label: '数据长度', prop: 'data_length', width: 40},
        {label: '数据精度', prop: 'data_precision', width: 40},
        {label: '是否可空', prop: 'nullable', width: 40},
        {label: '是否主键', prop: 'pk', width: 40}]
    };
  },
  methods: {
    beforeClose(done) {
      this.visible = false
      // 从DOM里将这个组件移除
      // visible只是控制了显示与隐藏  但是dom结构中还是存在组件  为了避免消耗内存必须销毁组件
      // setTimeout(() => {
      //   console.log("this.$el.parentNode", this.$el.parentNode)
      //   console.log("this.$el", this.$el)
      //   this.$el.parentNode.removeChild(this.$el)
      // }, 500)
      setTimeout(() => {
        if (typeof this.onClose === "function") {
          this.onClose(this.vmId)
          done()
        }
      }, 500);
    },
    closeDialog() {
      this.$refs.dialog.handleClose()
    }
  }
};
</script>
<style lang="less" scoped>
</style>